<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>

<body>
    <div>请输入一个数字</div>
    <input type="text">
    <button>确认</button>
    <!-- 显示猜数字结果 -->
    <div class="result">

    </div>
</body>
<script>
    //随机1~100的生成有数字
    let number = parseInt(Math.random() * 100) + 1;
    console.log(number);
    let input_div = document.querySelector('input');
    let button_div = document.querySelector('button');
    let show = document.querySelector('.result');

    //给按钮添加点击事件
    button_div.onclick = function () {
        if (input_div.value == '') {
            return;
        }
        //字符串转成数字
        let input_number = parseInt(input_div.value);
        if (input_number > number) {
            show.innerHTML = '猜大了!';
        } else if (input_number < number) {
            show.innerHTML = '猜小了！';
        } else {
            show.innerHTML = '猜对了!';
        }
    }
</script>

</html>